<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>

	<body>
		<div class="m_body"></div>
		<div class="ear1"></div>
		<div class="ear2"></div>
		<div class="eye1"></div>
		<div class="eye2"></div>
		<div class="face c_blue"></div>
		<div class="face c_red"></div>
		<div class="face c_purple"></div>
		<div class="face c_yellow"></div>
		<div class="face c_green"></div>
		<div class="nose"></div>
		<div class="mouse"></div>
		<div class="arm1"></div>
		<div class="arm2"></div>
		<div class="leg1"></div>
		<div class="leg2"></div>

		<style>
			* {
				margin: 0;
				padding: 0
			}
			
			body {
				font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif;
				background: #d4ebf1;
				color: #000;
			}
			
			.m_body {
				width: 362px;
				height: 410px;
				border: #393939 8px solid;
				margin: 50px auto;
				border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;
				position: absolute;
				left: 109px;
				top: -30px;
				background: #fff;
			}
			
			.ear1,
			.ear2 {
				background: #393939;
				width: 81px;
				height: 115px;
				border-radius: 50%;
				position: absolute;
				z-index: -1;
			}
			
			.ear1 {
				left: 150px;
				top: 26px;
				transform: rotate( -10deg);
			}
			
			.ear2 {
				left: 362px;
				top: 28px;
				transform: rotate(10deg);
			}
			
			.eye1,
			.eye2 {
				background: #393939;
				width: 83px;
				height: 115px;
				border-radius: 50%;
				position: absolute;
			}
			
			.eye1 {
				left: 185px;
				top: 122px;
				transform: rotate(45deg);
			}
			
			.eye2 {
				left: 329px;
				top: 122px;
				transform: rotate(-45deg);
			}
			
			.eye1:before,
			.eye2:before {
				content: "";
				width: 40px;
				height: 40px;
				border: #fff 5px solid;
				border-radius: 100%;
				position: absolute;
			}
			
			.eye1:before {
				right: 10px;
				top: 22px;
			}
			
			.eye2:before {
				left: 10px;
				top: 22px;
			}
			
			.eye1:after,
			.eye2:after {
				content: "";
				width: 10px;
				height: 10px;
				background: #9b9b9b;
				border-radius: 100%;
				position: absolute;
			}
			
			.eye1:after {
				right: 27px;
				top: 31px;
			}
			
			.eye2:after {
				left: 41px;
				top: 44px;
			}
			
			.face {
				position: absolute;
				border-radius: 48% 48% 44% 49%/ 53% 54% 45% 47%;
			}
			
			.c_blue {
				border: #6bcdf3 5px solid;
				width: 280px;
				height: 224px;
				left: 150px;
				top: 78px;
			}
			
			.c_red {
				border: #af2350 5px solid;
				width: 287px;
				height: 233px;
				left: 146px;
				top: 73px;
			}
			
			.c_purple {
				border: #5d75b3 5px solid;
				width: 295px;
				height: 240px;
				left: 142px;
				top: 70px;
			}
			
			.c_yellow {
				border: #ffc346 5px solid;
				width: 305px;
				height: 248px;
				left: 137px;
				top: 65px;
			}
			
			.c_green {
				border: #7fcb58 5px solid;
				width: 313px;
				height: 256px;
				left: 133px;
				top: 61px;
			}
			
			.arm1,
			.arm2 {
				background: #333;
				position: absolute;
				z-index: -1;
			}
			
			.arm1 {
				width: 75px;
				height: 118px;
				left: 64px;
				top: 244px;
				transform: rotate(45deg);
				border-radius: 24% 69% 68% 76%/ 53% 95% 40% 52%;
			}
			
			.arm2 {
				width: 75px;
				height: 148px;
				left: 463px;
				top: 162px;
				transform: rotate(37deg);
				border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;
			}
			
			.arm2:before {
				content: "";
				width: 16px;
				height: 24px;
				background: #bc242c;
				position: absolute;
				border-top-left-radius: 50%;
				border-top-right-radius: 50%;
				transform: rotate(45deg);
				left: 32px;
				top: 20px;
			}
			
			.arm2:after {
				content: "";
				width: 16px;
				height: 24px;
				background: #bc242c;
				position: absolute;
				border-top-left-radius: 50%;
				border-top-right-radius: 50%;
				transform: rotate(-45deg);
				left: 26px;
				top: 20px;
			}
			
			.arm_c {
				content: "";
				width: 16px;
				height: 24px;
				position: absolute;
				left: 426px;
				top: 20px;
			}
			
			.nose {
				background-color: #333333;
			}
			
			.nose:before,
			.nose:after {
				content: '';
				position: absolute;
				background-color: inherit;
			}
			
			.nose,
			.nose:before,
			.nose:after {
				width: 28px;
				height: 18px;
				border-radius: 42px 42px 60px 61px/ 30px 30px 50px 46px;
			}
			
			.nose {
				position: absolute;
				left: 284px;
				top: 187px;
			}
			
			.mouse {
				position: absolute;
				left: 265px;
				top: 205px;
				width: 68px;
				height: 25px;
				border-radius: 48%;
				border: #393939 7px solid;
				border-top: none;
				border-left: 0;
				border-right: 0;
			}
			
			.leg1,
			.leg2 {
				background: #333;
				position: absolute;
				width: 83px;
				height: 80px;
				border-radius: 0 0 30px 30px;
				z-index: -1;
			}
			
			.leg1 {
				left: 187px;
				top: 423px;
			}
			
			.leg2 {
				left: 328px;
				top: 423px;
			}
			
			.leg1:after,
			.leg2:after {
				content: "";
				width: 43px;
				height: 30px;
				position: absolute;
				background: #363636;
				border-radius: 30px;
			}
			
			.leg1:after {
				bottom: 0;
				right: -3px;
			}
			
			.leg2:after {
				bottom: 0;
				left: -3px;
			}
		</style>

		<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
		<script>
			$(".arm2").on('click', function() {
				$(".arm2").css('transform', 'rotate(30deg)');
				setTimeout(function() {
					$(".arm2").css('transform', 'rotate(37deg)');
				}, 100)
			})
			
			$(".ear1, .ear2").on('click', function() {
				$(".ear1, .ear2").css('transform', 'none');
				setTimeout(function() {
					$(".ear1").css('transform', 'rotate(-10deg)');
					$(".ear2").css('transform', 'rotate(10deg)');
				}, 100)
			})
		</script>
	</body>

</html>